<template>
  <div>
    <div class="top">
      <div class="search-container">
        <el-input
            placeholder="请输入openid进行搜索"
            v-model="searchKeyword"
            clearable>
        </el-input>
      </div>
      <div>
        <el-button
            type="success"
            round
            @click="addCourse">添加课表</el-button>
      </div>
    </div>
    <div class="table-container">
      <table class="data-table">
        <thead>
        <tr class="sticky-header">
          <th>id</th>
          <th>openid</th>
          <th>课程名称</th>
          <th>任课教师</th>
          <th>课程周次</th>
          <th>周次信息</th>
          <th>周</th>
          <th>时间</th>
          <th>上课地点</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in filOpenid" :key="item.id">
          <td>
            <span>{{ item.id }}</span>
          </td>
          <td>
            <span>{{ item.openid }}</span>
          </td>
          <td>
            <span>{{ item.course }}</span>
          </td>
          <td>
            <span>{{ item.teacher }}</span>
          </td>
          <td>
            <span>{{ item.weeks }}</span>
          </td>
          <td>
            <span>{{ item.day_of_week }}</span>
          </td>
          <td>
            <span>{{ item.weekend }}</span>
          </td>
          <td>
            <span>{{ item.time }}</span>
          </td>
          <td>
            <span>{{ item.room }}</span>
          </td>
          <td><el-button
              type="primary"
              plain
              class="edit-button"
              @click="changeInfo(item.id)"
          >编辑</el-button></td>
        </tr>
        </tbody>
      </table>
    </div>
    <EditInfo :value="value" ref="modal" v-if="isEdit" @cancel="hideModal"></EditInfo>
    <AddCourse v-if="isAdd" @hideAdd="hideAdd"></AddCourse>
  </div>
</template>

<script>
import EditInfo from "@/components/EditInfo.vue";
import AddCourse from "@/components/AddCourse.vue";
import axios from "axios";
export default {
  name: "CourseInfo",
  components:{
    EditInfo,
    AddCourse
  },
  data() {
  return {
      courseData: [],
      searchKeyword: '',
      value:'',
      isEdit:false,
      isAdd:false
    };
  },
  computed: {
    filOpenid(){
      return this.courseData.filter((item)=>{
        return item.openid.indexOf(this.searchKeyword) !== -1
      })
    }
  },
  methods: {
    changeInfo(id){
      this.isEdit = !this.isEdit
      this.value = id
    },
    hideModal(){
      this.isEdit = false;
    },
    hideAdd(){
      this.isAdd = false;
    },
    addCourse(){
      this.isAdd = !this.isAdd
    }
  },
  mounted() {
    axios.post('/api/course')
        .then(res => {
          // console.log(res.data.result);
          this.courseData = res.data.result
        })
        .catch(error => {
          console.error(error);
        });
  },
}
</script>

<style scoped>
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
input{
  width: 500px;
}
.search-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.search-container input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.search-container button {
  padding: 5px 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  cursor: pointer;
}
.sticky-header {
  position: sticky;
  top: -5px;
  background-color: white; /* 可选：设置表头的背景色 */
}
.table-container {
  width: 85%; /* 根据你的需求设置固定宽度 */
  position: fixed;
  top: 200px;
  bottom: 0;
  left: 210px;
  overflow-y: scroll;
}
.edit-button {
  display: none; /* 初始隐藏按钮 */
}

tr:hover .edit-button {
  display: inline-block; /* 鼠标悬停时显示按钮 */
}

.data-table {
  width: 100%;
  font-size: 50%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px;
  border: 1px solid #ccc;
}

.data-table th {
  background-color: #f3f3f3;
}
table{
  margin-bottom: 50px;
}
</style>